<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
</style>

<template>
    <div>
        <Row type="flex" justify="end" style="margin: 12px 0">
            <DatePicker :value="selectedDateRange" type="datetimerange" :options="dateOptions" placeholder="请选择时间范围" style="width: 280px; margin-right: 12px;"></DatePicker>
            <!-- <Select v-model="selectedAnalysisType" style="width: 160px; margin-right: 12px;" @on-change="changeAnalysisType">
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select> -->
            <Button type="primary">查看</Button>
        </Row>
        <Row>
            <Card style="min-height: 500px; margin-bottom: 16px">
                <div slot="title" style="display: flex; justify-content: space-between">
                    <Tabs :value="tagMode" type="card" style="margin-bottom: 0" @on-click="switchTab">
                        <TabPane label="故障事件" name="event"></TabPane>
                        <TabPane label="处理报障" name="eventHandle"></TabPane>
                        <TabPane label="报障响应时间" name="eventResponse"></TabPane>
                    </Tabs>
                    <div>
                        <Tooltip content="数据下载">
                            <Button type="text" style="padding: 4px 4px 0"><Icon type="ios-cloud-download-outline" size="24"></Icon> </Button>
                        </Tooltip>
                    </div>
                </div>
                <div>
                    <chart :options="selectedOption" style="width: 100%;" auto-resize></chart>
                </div>
            </Card>
        </Row>
        <Row type="flex" justify="space-between">
            <Col :sm="24" :md="12" :lg="8" class="info-panel">
                <Card style="min-height: 300px">
                    <div slot="title">
                        <h4>故障种类分布</h4>
                        <Tooltip content="数据下载" style="position: absolute; right: 12px; top: 12px;">
                            <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                        </Tooltip>
                    </div>
                    <div>
                        <chart :options="eventTypeOption" style="width: 100%; height: 300px;" auto-resize></chart>
                    </div>
                </Card>
            </Col>
            <Col :sm="24" :md="12" :lg="8" class="info-panel">
                <Card style="min-height: 300px">
                    <div slot="title">
                        <h4>管理员处理量Top10</h4>
                        <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                            <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                        </Tooltip>
                    </div>
                    <div style="height: 300px; padding: 0 8px">
                        <div class="top10-row"><span class="top10-name">管理员1</span><span class="top10-digit">8314</span></div>
                        <div class="top10-row"><span class="top10-name">管理员2</span><span class="top10-digit">7491</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">1345</span></div>
                        <div class="top10-row"><span class="top10-name">管理员4</span><span class="top10-digit">513</span></div>
                        <div class="top10-row"><span class="top10-name">管理员5</span><span class="top10-digit">424</span></div>
                        <div class="top10-row"><span class="top10-name">管理员6</span><span class="top10-digit">194</span></div>
                        <div class="top10-row"><span class="top10-name">管理员7</span><span class="top10-digit">185</span></div>
                        <div class="top10-row"><span class="top10-name">管理员8</span><span class="top10-digit">185</span></div>
                        <div class="top10-row"><span class="top10-name">管理员9</span><span class="top10-digit">185</span></div>
                        <div class="top10-row"><span class="top10-name">管理员10</span><span class="top10-digit">185</span></div>
                    </div>
                </Card>
            </Col>
            <Col v-show="(selectedAnalysisType==='AC' || selectedAnalysisType==='all')" :sm="24" :md="12" :lg="8" class="info-panel">
                <Card style="min-height: 300px">
                    <div slot="title">
                        <h4>管理员响应速度Top10</h4>
                        <Tooltip content="全量数据" style="position: absolute; right: 12px; top: 12px;">
                            <Button type="text" style="padding: 0 4px"><Icon type="ios-cloud-download-outline" size="20"></Icon> </Button>
                        </Tooltip>
                    </div>
                    <div style="height: 300px; padding: 0 8px">
                        <div class="top10-row"><span class="top10-name">管理员1</span><span class="top10-digit">12分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员2</span><span class="top10-digit">14分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                        <div class="top10-row"><span class="top10-name">管理员3</span><span class="top10-digit">41分钟</span></div>
                    </div>
                </Card>
            </Col>
        </Row>
    </div>
</template>

<script>
import { DHCPOption } from "./data/DHCP";
import { DNSOption } from "./data/DNS";
import { AAAOption } from "./data/AAA";
import { APhealthOption } from "./data/AP-health";
import { APOnlineOption } from "./data/AP-online";
import { clientOption } from "./data/client";
import { eventOption } from "./data/events";
import { bandwidthOption } from "./data/bandwidth";
import { deviceTypeOption } from "./data/pie/client-type";
import { eventTypeOption } from "./data/pie/event-type";
import { radioTypeOption } from "./data/pie/radio";
import { eventHandleOption } from "./data/eventHandle";
import { eventResponseOption } from "./data/eventResponse";
import moment from "moment";
export default {
  name: "network",
  data() {
    return {
      selectedDateRange: [
        moment()
          .subtract(6, "days")
          .format("L"),
        moment().format("L")
      ],
      selectedType: "all",
      typeList: [
        { value: "all", label: "全部" },
        { value: "AC", label: "AC" },
        { value: "AP", label: "AP" },
        { value: "client", label: "用户端" },
        { value: "services", label: "网络服务" },
        { value: "events", label: "故障" }
      ],
      dateOptions: {
        disabledDate(date) {
          const disabledDay = date.getDate();
          return date && date.valueOf() > Date.now();
        }
      },
      selectedAnalysisType: "all",
      tagMode: "event",
      csvFileName: "",
      deviceTypeOption,
      eventTypeOption,
      eventHandleOption,
      eventResponseOption
    };
  },
  computed: {
    selectedOption() {
      return {
        DHCP: DHCPOption,
        DNS: DNSOption,
        AAA: AAAOption,
        health: APhealthOption,
        AP: APOnlineOption,
        client: clientOption,
        event: eventOption,
        bandwidth: bandwidthOption,
        eventHandle: eventHandleOption,
        eventResponse: eventResponseOption
      }[this.tagMode];
    }
  },
  methods: {
    changeAnalysisType(type) {
      if (type === "all") {
        this.tagMode = "DHCP";
      } else if (type === "AP") {
        this.tagMode = "health";
      } else if (type === "client") {
        this.tagMode = "client";
      } else if (type === "services") {
        this.tagMode = "DHCP";
      } else if (type === "events") {
        this.tagMode = "event";
      }
    },
    switchTab(name) {
      this.tagMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表"
        });
      } else if (type === 2) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表(排序和过滤后)",
          original: false
        });
      }
    }
  }
};
</script>

<style lang='less' scoped>
.info-panel {
  margin-bottom: 16px;
  @media screen and (min-width: 992px) {
    width: calc(~"50% - 4px");
  }
  @media screen and (min-width: 1200px) {
    width: calc(~"33.333% - 5.333px");
  }
}
.top10-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px dashed #ccc;
}
.top10-row:first-of-type {
  padding-top: 0;
}
.top10-row:last-of-type {
  border-bottom: none;
}
.top10-name {
  padding: 0 4px;
  color: #000;
}
.top10-digit {
  padding: 0 4px;
  color: #444;
}
</style>